<template>
    <el-select v-model="codeTableValue" :placeholder="options.placeholder" @focus="fetchData">
        <el-option v-for="option in codeTableOptions" :key="option.value" :label="option.label" :value="option.value">
        </el-option>
    </el-select>
</template>
<script>
import { defineComponent, ref, watchEffect } from 'vue';
export default defineComponent({
    name: 'CodeTable',
    // 属性列表
    props: {
        // 选项
        options: {
            type: Object,
            default: () => ({})
        },
        // 默认值
        defaultValue: {
            type: null
        },
        // 值
        value: {
            type: null
        },
        // 自定义验证器
        customValidator: {
            type: Function
        }
    },
    setup(props) {
        const codeTableValue = ref(props.value || props.defaultValue)
        const codeTableOptions = ref([])

        const fetchData = async () => {
            // 调用接口获取下拉数据并赋值给 codeTableOptions
        }

        watchEffect(() => {
            fetchData()
        })

        watch(
            () => props.value,
            (val) => {
                codeTableValue.value = val
            }
        )

        watch(codeTableValue, (val) => {
            props.$emit('update:modelValue', val)
        })

        return {
            codeTableValue,
            codeTableOptions,
            fetchData
        }
    }
})
</script>
